<template>
	<view class="conponentsPagesContent">
		<uni-row class="listView" v-if="list.length != 0">
			<uni-col :span="6" class="itemView" v-for="(item,index) in list " :key="index">
				<view class="item images">
					<image class="price" @click="goPreview(item,index)"
						v-if="scanType=='PICTURE' || scanType== 'ALL_PICTURE'" :src="item.filePath" mode="aspectFit">
					</image>										
				</view>

			</uni-col>
		</uni-row>
		<view class="noData" v-if="list.length == 0 "> 正在努力扫描中。。。 </view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		props: {
			scanType: {
				default: null,
				type: String
			},
			selectOptions: {
				default: true,
				type: Boolean
			},
			list: {
				default: [],
				type: Array
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 选择文件
			selectItemClick(item, index) {
				this.list.forEach((v, i) => {
					v.isSelect = false
				})
				this.list[index].isSelect = true
				this.$forceUpdate();
			},
			goPreview(item, index) {
				console.log("点击item 插件")
				uni.setStorageSync("selectItem", JSON.stringify(item))
				this.$emit("goPreviewItem") //点击单个跳转预览				
			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.conponentsPagesContent {
		padding: 0 32rpx;
	}

	.listView {
		.itemView {
			margin-bottom: 8rpx;

			.item {
				margin: 0 auto;
				position: relative;
				width: 170rpx;
				height: 170rpx;
				background: #EEF3FF;
				border-radius: 8rpx;
				overflow: hidden;

				.select {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 60rpx;
					height: 60rpx;
					justify-content: center;
					align-items: center;
					display: flex;
					z-index: 10;

					.icon {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.price {
					position: absolute;
					z-index: 5;
					width: 170rpx;
					height: 170rpx;
				}

				.play {
					position: absolute;
					z-index: 5;
					width: 170rpx;
					height: 170rpx;
				}



			}
		}
	}

	.noData {
		font-size: 24rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		
		color: #939599;

	}
</style>